<!-- 用户参数 -->
<template>
    <div class="addAirPlan">
        <custom-dialog title="用户参数" size="large" @dialogClose="dialogClose">
            <div class="topStep">
                <div class="warp">
                    <img src="@/assets/images/1021/休眠模式.svg" />
                    <label class="title">休眠模式</label>
                    <span :class="wdValue == item ? 'hover' : ''" v-for="item in wdList" :key="item" @click="wdValue = item">{{
                        item
                    }}</span>
                </div>
                <div class="warp">
                    <img src="@/assets/images/1021/插座检测.svg" />
                    <label class="title">插座检测</label>
                    <span :class="czjcValue == item ? 'hover' : ''" v-for="item in czjcList" :key="item" @click="czjcValue = item">{{
                        item
                    }}</span>
                </div>
                <div class="warp">
                    <img src="@/assets/images/1103/季节选择.png" />
                    <label class="title">季节选择</label>
                    <span :class="jjxzValue == item ? 'hover' : ''" v-for="item in jjxzList" :key="item" @click="jjxzValue = item">{{
                        item
                    }}</span>
                </div>

                <div class="warp">
                    <img src="@/assets/images/1103/空调开机.png" />
                    <label class="title">空调开机</label>
                    <span :class="ktkjValue == item ? 'hover' : ''" v-for="item in ktkjList" :key="item" @click="ktkjValue = item">{{
                        item
                    }}</span>
                </div>
            </div>
            <div style="text-align: right; margin-top: 10px">
                <el-button type="primary" class="nextBtn" :loading="loading" @click="dqClick" v-if="nodeList.length == 1">读取</el-button>
                <el-button type="primary" class="nextBtn" @click="saveData">确定</el-button>
            </div>
        </custom-dialog>
    </div>
</template>

<script>
import customDialog from '@/components/customComponents/customDialog'
import {PopupCommon} from '@/libs/popupCommon'
import iconBorder from '@/components/newIndex/iconBorder'
import {AjaxCommon} from '@/libs/apiCommon'
export default {
    name: 'addAirPlan',
    components: {customDialog, iconBorder},
    props: ['treeList'],
    watch: {
        treeList: {
            handler(newV) {
                if (newV) {
                    this.nodeList = newV
                }
            },
            immediate: true
        }
    },
    data() {
        return {
            loading: false,
            nodeList: [],

            /** 休眠模式 */
            wdValue: '无动作',
            wdList: ['启用', '不启用', '无动作'],
            wdValueList: [1, 0, 255],

            /** 插座检测 */
            czjcValue: '无动作',
            czjcList: ['启用', '不启用', '无动作'],
            czjcValueList: [1, 0, 255],

            /** 季节选择 */
            jjxzValue: '无动作',
            jjxzList: ['夏季', '冬季', '无动作'],
            jjxzValueList: [0, 1, 255],

            /** 空调开机 */
            ktkjValue: '无动作',
            ktkjList: ['不允许', '按策略运行', '无条件允许', '无动作'],
            ktkjValueList: [0, 1, 2, 255],

            // 预存电量：
            ycdl: 65535
        }
    },
    computed: {},
    created() {},
    methods: {
        async dqClick() {
            this.loading = true
            const item = this.nodeList[0]

            const data = await AjaxCommon(`/api/Eq/GetEqRtBadVal?eqid=${item.eq_guid}&sjx=16`, 'post', {})

            // 休眠模式 | 预存电量 | 季节模式选择 |允许空调开机 |插座监控
            const v = data.data.Message
            this.loading = false
            const dSplit = v?.split('|')
            if (v && dSplit?.length > 1) {
                //休眠模式
                const xmms = dSplit?.[0] ?? ''
                if (xmms == 1) {
                    this.wdValue = '启用'
                } else if (xmms == 0) {
                    this.wdValue = '不启用'
                } else {
                    this.wdValue = '无动作'
                }
                // 预存电量
                this.ycdl = dSplit?.[1] ?? ''
                // 季节模式选择
                const jjms = dSplit?.[2] ?? ''
                if (jjms == 1) {
                    this.jjxzValue = '冬季'
                } else if (jjms == 0) {
                    this.jjxzValue = '夏季'
                } else {
                    this.jjxzValue = '无动作'
                }
                // 允许空调开机
                const ktkgj = dSplit?.[3] ?? ''
                if (ktkgj == 0) {
                    this.ktkjValue = '不允许'
                } else if (ktkgj == 1) {
                    this.ktkjValue = '按策略运行'
                } else if (ktkgj == 2) {
                    this.ktkjValue = '无条件允许'
                } else {
                    this.ktkjValue = '无动作'
                }
                // 插座监控
                const czjc = dSplit?.[4] ?? ''
                if (czjc == 0) {
                    this.czjcValue = '不启用'
                } else if (czjc == 1) {
                    this.czjcValue = '启用'
                } else {
                    this.czjcValue = '无动作'
                }
            } else {
                PopupCommon.notify('info', '未读取到数据')
            }
        },
        saveData() {
            // 设置用户参数
            // Sjx=17  cs参数设定对应 （5个参数，通过‘|’分隔）
            // 休眠模式 | 预存电量|季节模式选择 |允许空调开机 |插座监控

            // 休眠模式
            const xmms = this.wdValueList[this.wdList.findIndex((t) => t == this.wdValue)]
            // 预存电量
            const ycdl = this.ycdl
            // 季节模式选择
            const jjxz = this.jjxzValueList[this.jjxzList.findIndex((t) => t == this.jjxzValue)]
            // 允许空调开机
            const ktkj = this.ktkjValueList[this.ktkjList.findIndex((t) => t == this.ktkjValue)]
            // 插座监控
            const czjk = this.czjcValueList[this.czjcList.findIndex((t) => t == this.czjcValue)]
            const finishValue = xmms + '|' + ycdl + '|' + jjxz + '|' + ktkj + '|' + czjk
            this.$emit('save', finishValue)
        },
        ktppdmWdzClick() {
            if (this.ktppdmWdz == 0) {
                this.ktppdmWdz = 1
            } else {
                this.ktppdmWdz = 0
            }
        },
        ktdlyzWdzChange(e) {
            this.ktdlyz = e
            this.ktdlyzWdz = 0
        },
        ktdlyzWdzClick() {
            if (this.ktdlyzWdz == 0) {
                this.ktdlyzWdz = 1
            } else {
                this.ktdlyzWdz = 0
            }
        },
        ktppdmChange(e) {
            this.ktppdm = e
            this.ktppdmWdz = 0
        },
        czjcglyzChange(e) {
            this.czjcglyz = e
            this.czjcglyzWdz = 0
        },
        czjcglyzWdzClick() {
            if (this.czjcglyzWdz == 0) {
                this.czjcglyzWdz = 1
            } else {
                this.czjcglyzWdz = 0
            }
        },
        xtzqWdzClick() {
            if (this.xtzqWdz == 0) {
                this.xtzqWdz = 1
            } else {
                this.xtzqWdz = 0
            }
        },
        xtzqChange(e) {
            // 30-1440
            if (e <= 30) {
                this.xtzq = 30
            } else if (e >= 1440) {
                this.xtzq = 1440
            } else {
                this.xtzq = e
            }
            this.xtzqWdz = 0
        },
        dialogClose() {
            this.$emit('dialogClose', '')
        }
    }
}
</script>

<style lang="scss" scoped>
.ivu-tabs-bar {
    margin-bottom: 0 !important;
}
.topStep {
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    .warp {
        .warpDiv {
            background-color: #fff;
            width: 50px;
            height: 50px;
            border-radius: 50px;
            justify-content: center;
            align-items: center;
            display: flex;
            img {
                width: 32px;
            }
        }
        width: calc(45% - 10px);
        display: flex;
        background-color: #f0f3fa;
        border-radius: 8px;
        padding: 10px;
        align-items: center;
        justify-content: flex-start;
        &:nth-child(2n) {
            width: calc(55% - 10px);
        }
        .title {
            color: #2f4bbd;
            margin-left: 10px;
            margin-right: 30px;
            font-size: 18px;
        }
        span {
            display: flex;
            color: #2f4bbd;
            font-size: 16px;
            margin-left: 10px;
            cursor: pointer;
            border: 1px solid #f0f3fa;
            padding: 6px;
            display: inline-block;
            &:hover {
                background-color: #dce3f4;
                border-color: #2f4bbd;
                border-radius: 4px;
            }
        }
        .hover {
            background-color: #dce3f4;
            border-color: #2f4bbd;
            border-radius: 4px;
        }
    }
}
.wdControl {
    display: inline-block;
    border: 1px solid #ddd;
    padding: 4px 10px;
    font-size: 22px;
    color: #5795d4;
    cursor: pointer;
    line-height: 28px;
    height: 35px;
}
.wdControl:nth-child(1) {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    width: 40px;
    background-color: #dbe7f5;
}
.wdControl:nth-child(3) {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    width: 40px;
    background-color: #dbe7f5;
}
.wdControl:nth-child(2) {
    border-right: none;
    border-left: none;
}
</style>